<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" style="border:1px solid #CCC" ref="buttondiv">
          <div style="overflow-x: auto;width: 100%;min-width: 932px;">
              <div class="s-param">
                  <div class="s-title">日期</div>
                  <div class="s-param__text">
                      <el-date-picker v-model="startDt" type="date" placeholder="开始日期" value-format="yyyy-MM-dd" @change="BtnQueryQCLevel" style="width: 110px" :clearable="false"></el-date-picker> 至
                      <el-date-picker v-model="endDt" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" @change="BtnQueryQCLevel" style="width: 110px" :clearable="false"></el-date-picker>
                  </div>
                  <div class="s-title">仪器</div>
                  <div class="s-param__text">
                      <rm-ddl-instrument @change="yq_change" width="180px" v-model="instrid" defaultflag="1" prgno="LIS535" :clearable="false"></rm-ddl-instrument>
                  </div>
                  <div class="s-param__text">
                      <el-checkbox v-model="bOut3SD" size="mini" true-label="1" false-label="0" @change="BtnQueryQCLevel">显示3SD外</el-checkbox>
                  </div>
                  <div class="s-param__text">
                      <el-checkbox style="margin: 0px 5px;" v-model="bInuse" true-label="1" false-label="0" @change="BtnQueryQCLevel">仅累计点</el-checkbox>
                  </div>
                  <div class="s-btn">
                      <el-button icon="el-icon-search" @click="BtnQueryQCLevel" type="primary">查询(F8)</el-button>
                      <el-button @click="btnExport" icon="el-icon-upload2">导出验证项目表</el-button>
                      <!-- <el-button icon="el-icon-printer" @click="qcprint_click()" disabled>打印(F10)</el-button>
                      <el-button icon="el-icon-tickets" @click="qcprint_preview_click()" disabled>打印预览(F11)</el-button> -->
                      <el-button icon="el-icon-close" @click="BtnExc" type="warning">退出(E)</el-button>
                  </div>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-left splitcolor="#ffffff" :splitwidth="5" :fixsize="810" :minfixsize="600" :maxfixsize="850">
              <template v-slot:fix>
                  <div style="height:100%;border:1px solid #CCC">
                      <rm-layout-top splitcolor="#ffffff" :splitwidth="5" :fixsize="300" :minfixsize="100" :maxfixsize="500" :canDrag="true">
                          <template v-slot:fix>
                              <rm-layout-left splitcolor="#ffffff" :splitwidth="5" :fixsize="130" :minfixsize="80" :maxfixsize="200" :canDrag="true">
                                  <template v-slot:fix>
                                      <div class="tabtop" style="width:100%;">
                                          <div class="tab-title">验证水平
                                          </div>
                                      </div>
                                      <div style="height:calc( 100% - 26px); width: 100%;border: 1px solid #ccc;">
                                          <vxe-table ref="qcLvXTable" height="auto" border :loading="bQCLevelLoading" :data.sync="qcLvData" size="mini" highlight-current-row highlight-hover-row resizable stripe header-align="center" :keyboard-config="selKeyConfig" :keyboard-local-config="selKeyLocalConfig" @current-change="QCLevelChange">
                                              <vxe-table-column sortable field="qclevelna" title="水平" align="center" width="100%"></vxe-table-column>
                                          </vxe-table>
                                      </div>
                                  </template>
                                  <div class="tabtop" style="width: calc( 100% - 3px);">
                                      <div class="tab-title">Westgard 西格玛规则
                                          <el-tag style="margin:1.0 5px;height:23px;font-size:14px;line-height:23px;float:right">根据临界系统误差和质控方法的性能，选择质控规则。</el-tag>
                                      </div>
                                  </div>
                                  <div style="height:calc( 100% - 29px); width: calc( 100% - 3px);">
                                      <el-image style="width: 100%; height: 100%;padding:5 5 5 5;border: 1px solid #ccc;" :src="src" :preview-src-list="srcList"></el-image>
                                  </div>
                              </rm-layout-left>
                          </template>
                          <div class="tabtop">
                              <div class="tab-title">验证项目 <el-checkbox v-model="bShowAllItem" true-label="1" false-label="0" @change="ChangShowItemMode()">显示所有项目点</el-checkbox>
                                  <el-checkbox v-model="bShowRptItemname" true-label="1" false-label="0" @change="ChangeShowRptItem()">显示项目名称</el-checkbox>
                              </div>
                          </div>
                          <div style="height:calc( 100% - 26px)">
                              <vxe-table ref="itemXTable" height="auto" border :loading="bσLoading" :data.sync="σData" size="mini" highlight-current-row highlight-hover-row resizable stripe header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: false,showIcon:false,autoClear:true}" :keyboard-config="selKeyConfig" :keyboard-local-config="selKeyLocalConfig" :cell-class-name="CellClassName" @current-change="ItemChange">
                                  <vxe-table-column sortable field="rpt_itemname" title="项目名称" width="165"></vxe-table-column>
                                  <vxe-table-column sortable field="qctea" title="允许总误差(Tea)(%)" width="72px" align="right" :edit-render="{ name: 'input' ,autoselect: true,autoClear:true}"></vxe-table-column>
                                  <vxe-table-column field="cv" title="不精密度(CV)(%)    " width="70px" header-align="center" align="right" :edit-render="{ name: 'input' ,autoselect: true,autoClear:true}"></vxe-table-column>
                                  <vxe-table-column field="bias" title="偏倚(Bias)(%)" width="62px" header-align="center" align="right" :edit-render="{ name: 'input',autoselect: true,autoClear:true}"></vxe-table-column>
                                  <vxe-table-column field="cnt" title="个数" width="35" header-align="center" align="center"></vxe-table-column>
                                  <vxe-table-column field="σlevel" title="σ水平" width="47px" header-align="center" align="center"></vxe-table-column>
                                  <vxe-table-column field="performance" title="性能" width="60" header-align="center"></vxe-table-column>
                                  <vxe-table-column field="westgardrules" title="质控规则" width="120" header-align="center" show-overflow="tooltip"></vxe-table-column>
                                  <vxe-table-column field="alladd" style="width:100%;height:100%" title="确定" width="73" header-align="center" align="center">
                                      <template v-slot:header="{ column }">
                                          <el-button v-model="editAll" style=" background-color:SandyBrown" @click="EditAll(column)">全部添加</el-button>
                                      </template>
                                      <template v-slot="{row}">
                                          <el-button v-model="editItem" style=" background-color:SandyBrown" @click="EditItem(row)">添加</el-button>
                                      </template>
                                  </vxe-table-column>
                                  <vxe-table-column field="allin" title="应用规则" width="73" header-align="center" align="center">
                                      <template v-slot:header="{ column }">
                                          <el-button type="primary" v-model="useAll" style=" background-color:rebeccapurple" @click="UseAll(column)" disabled>应用规则</el-button>
                                      </template>
                                      <template v-slot="{row}">
                                          <el-button v-model="useItem" style=" background-color:rebeccapurple" @click="UseItem(row)" disabled>应用</el-button>
                                      </template>
                                  </vxe-table-column>
                              </vxe-table>
                          </div>
                      </rm-layout-top>
                  </div>
              </template>
              <div class="tabtop" style="width:100%;">
                  <div class="tab-title">Sigma 性能验证图 <el-checkbox v-model="bWestσFlag" @change="WestFlagChange" true-label="1" false-label="0">显示规则</el-checkbox>
                      <el-tag style="margin:1.0 5px;height:23px;font-size:14px;line-height:23px;float:right">根据落点位置，选择质控规则。</el-tag>
                  </div>
              </div>
              <div style="width:100%;height:calc( 100% - 26px );border:1px solid #ccc">
                  <div id="lis535σChart" style="width: 100%; height: 100%; "></div>
              </div>
          </rm-layout-left>
      </div>
      <el-dialog width="620px" top="10px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="选择Westgard质控规则" :visible.sync="qcruleDialogVisible">
          <!-- :loading="loading" :select-config="{ reserve: true }" -->
          <vxe-table ref="ruleTable" height="480" width="100%" :data.sync="ruleData" border size="mini" :mouse-config="{ selected: true }" show-header-overflow highlight-current-row highlight-hover-row resizable stripe :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
              <!-- <vxe-table-column type="selection" width="50" align="center"></vxe-table-column> -->
              <vxe-table-column field="qcrule" title="质控规则" width="100" align="center"></vxe-table-column>
              <vxe-table-column field="ruleText" title="规则内容" width="400" header-align="center"></vxe-table-column>
          </vxe-table>
          <span slot="footer" class="dialog-footer">
              <el-button style="margin: 0px 10px 0px 5px" icon="el-icon-success" @click="ruleOk()">确定</el-button>
              <el-button style="margin: 0px 10px 0px 5px" icon="el-icon-close" @click="ruleClose()">退出</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import XE from "xe-utils";
window.devicePixelRatio = 2;
import echarts from "echarts"; //引入echarts
XE.mixin({
  // 自定义全局的格式化处理函数
  formatSelect(cellValue, list) {
      let item = list.find((item) => item.value == cellValue);
      return item ? item.label : "";
  },
});
export default {
  name: "LIS535",
  data() {
      return {
          //* new
          //* 查询
          qcyear: "",
          //* 左侧-上
          qcLvData: [],
          bQCLevelLoading: false,
          //*左侧-下
          bσLoading: false,
          σData: [],
          //*中间-质控项目
          bσLoading: false,
          //*右侧
          activeTabName: "statistics", //默认tab页
          //*右侧-tab-统计数据
          //!这点数据应该不用loading了
          monthkey: 0,
          monthData: [],
          accumkey: 0,
          accumData: [],
          bMControl: "1",
          //*右侧-tab-原始结果
          bValueLoading: false,
          valuekey: 0,
          valueData: [],
          //*vxe - 键盘事件
          selKeyLocalConfig: {
              isArrow: true,
          },
          keyLocalConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
              isArrow: true,
          },
          //*频率分布直方图
          charts: "", //实例
          xData: [0, 10, 22, 30, 40, 50],
          yData: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          dec_digits: -2, //-2 设为初始值 -1 原始结果 其余代表保留几位小位数
          //*查询
          // startDt: XE.toDateString(new Date(), "yyyy-01-01"), //起始日期
          startDt: XE.toDateString(new Date(), "yyyy-01-01"), //起始日期
          endDt: XE.toDateString(new Date(), "yyyy-MM-dd"), //结束日期
          instrid: 0, //仪器ID
          nstrName: "",
          //σ选择westgard
          src: require("@/assets/QC/IQC/LIS535/basemode.jpg"),
          srcList: [require("@/assets/QC/IQC/LIS535/basemode.jpg")],
          //标准化西格玛性能验证图
          bWestσFlag: "0",
          bOut3SD: "1",
          bInuse: "1",
          bShowAllItem: "1",
          bShowRptItemname: "1",
          editAll: 0,
          editItem: 0,
          useAll: 0,
          useItem: 0,
          selKeyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          pointData: [],
          ruleData: [],
          qcruleDialogVisible: false,
          instrname: "",
      };
  },
  created() {},
  mounted() {
      // var echartsTheme = require("../../../common/echarts_theme_shine.json"); // echarts图形的样式配置文件
      // echarts.registerTheme("shine", echartsTheme); // 注册样式
      var echartsid = document.getElementById("lis535σChart");
      this.charts = echarts.init(echartsid, "shine");
      this.$nextTick(() => {
          this.charts.resize({ width: this.autoWidth, height: this.autoHeight }); //窗口初始化时echart大小可自适应 ;
          this.Draw(); //初始化时画一个样子出来
      });
  },
  watch: {
      // instrid(val) {
      //     this.yq_change(this.instrid, this.instrname);
      // },
  },
  methods: {
      //*********************LIS535函数区********************* */
      //画出所有项目点
      DrawAllPointFun() {
          return new Promise((resolve) => {
              this.$refs.itemXTable.afterFullData.forEach((e) => {
                  this.DrawPointFun(e, 2);
              });
              resolve();
          });
      },
      //画出项目点
      DrawPointFun(row, flag) {
          return new Promise((resolve) => {
              var calqctea = XE.toNumber(row.qctea);
              var calcv = XE.toNumber(row.cv);
              var calbias = XE.toNumber(row.bias);
              var bSupremePoint = false;
              var rptname = row.chart_rpt_itemname;
              var σlevel = row.σlevel;
              var performance = row.performance;
              var westgardrules = row.westgardrules;
              if (flag == 1 && row.bias == "") {
                  this.pointData = [];
                  this.Draw();
              }
              if (calqctea > 0 && calcv > 0 && row.bias >= 0 && row.bias != "" && row.σlevel != "") {
                  var pointX = XE.toNumber(XE.toFixedString((calcv / calqctea) * 100, 2));
                  var orignX = XE.clone(pointX, true);
                  var pointY = XE.toNumber(XE.toFixedString((calbias / calqctea) * 100, 2));
                  var orignY = XE.clone(pointY, true);
                  //判断是否能打点
                  if (pointX > 50) {
                      pointX = 50;
                      bSupremePoint = true;
                  }
                  if (pointX < 0) {
                      pointX = 0;
                      bSupremePoint = true;
                  }
                  if (pointY > 100) {
                      pointY = 100;
                      bSupremePoint = true;
                  }
                  if (pointY < 0) {
                      pointY = 0;
                      bSupremePoint = true;
                  }
                  var color = "Grey";

                  if (row.σlevel >= 6) {
                      color = "DeepSkyBlue";
                  } else if (row.σlevel >= 5 && row.σlevel < 6) {
                      color = "Blue";
                  } else if (row.σlevel >= 4 && row.σlevel < 5) {
                      color = "ForestGreen";
                  } else if (row.σlevel >= 3 && row.σlevel < 4) {
                      color = "DarkOrange";
                  } else if (row.σlevel >= 2 && row.σlevel < 3) {
                      color = "Red";
                  } else if (row.σlevel < 2 && row.σlevel != "") {
                      color = "Grey";
                  }
                  if (flag == 1) {
                      this.pointData = [
                          {
                              value: [pointX, pointY],
                              name: rptname,
                              pos: "(" + orignX + "," + orignY + ")",
                              σlevel: σlevel,
                              color: color,
                              performance: performance,
                              westgardrules: westgardrules,
                              //自定义特殊 itemStyle，仅对该数据项有效
                              // itemStyle:{}
                              itemStyle: {
                                  color: color,
                              },
                          },
                      ];
                      this.Draw();
                  } else if (flag == 2) {
                      this.pointData.push({
                          value: [pointX, pointY],
                          name: rptname,
                          pos: "(" + orignX + "," + orignY + ")",
                          σlevel: σlevel,
                          color: color,
                          performance: performance,
                          westgardrules: westgardrules,
                          //自定义特殊 itemStyle，仅对该数据项有效
                          // itemStyle:{}
                          itemStyle: {
                              color: color,
                          },
                      });
                  }
                  resolve();
              }
          });
      },
      ChangeShowRptItem() {
          this.bShowRptItemname == "1" ? "0" : "1";
          this.Draw();
      },
      ChangShowItemMode() {
          this.pointData = [];
          if (this.bShowAllItem == "1") {
              this.DrawAllPointFun().then(() => {
                  this.Draw();
              });
          } else if (this.bShowAllItem == "0") {
              this.DrawPointFun(this.$refs.itemXTable.getCurrentRow(), 1);
          }
      },
      //全部应用
      UseAll(col) {
          console.log("全部应用");
      },
      //单个应用
      UseItem(row) {
          if (row.σ != "") {
              if (row.σlevel >= 3) {
                  this.bShowUseRules = true;
              }
          } else {
              return false;
          }
          //判断是否为空，空则无反应
          //弹窗，告知设定信息
          //确定 取消
      },
      //全部修改
      EditAll(col) {
          this.EditAllFun().then(() => {
              this.ImgChange(this.$refs.itemXTable.getCurrentRow());
              this.ChangShowItemMode();
          });
      },
      EditItem(row) {
          this.EditFun(row).then(() => {
              this.ImgChange(row);
              this.ChangShowItemMode();
          });
      },
      EditAllFun() {
          return new Promise((resolve) => {
              this.$refs.itemXTable.afterFullData.forEach((e) => {
                  this.EditFun(e);
              });
              resolve();
          });
      },
      EditFun(row) {
          return new Promise((resolve) => {
              var calqctea = XE.toNumber(row.qctea);
              var calcv = XE.toNumber(row.cv);
              var calbias = XE.toNumber(row.bias);
              if (calqctea > 0 && calcv > 0 && row.bias >= 0 && row.bias != "") {
                  row.σlevel = XE.toNumber(XE.toFixedString((calqctea - Math.abs(calbias)) / calcv, 2));
              }
              if (row.σlevel >= 6) {
                  row.performance = "世界一流";
                  row.westgardrules = "1 3s(N=2，R=1)";
                  row.rules = "1_2S,1_3S";
              } else if (row.σlevel >= 5 && row.σlevel < 6) {
                  row.performance = "优秀";
                  row.westgardrules = "1 3s/ 2 2s / R4s( N=4，R=1)";
                  row.rules = "1_2S,1_3S,2_2S,R4S";
              } else if (row.σlevel >= 4 && row.σlevel < 5) {
                  row.performance = "良好";
                  row.westgardrules = "13s / 22s / R4s / 41s( N=4,R=1 或 N=2,R=2 )";
                  row.rules = "1_2S,1_3S,2_2S,R4S,4_1S";
              } else if (row.σlevel >= 3 && row.σlevel < 4) {
                  row.performance = "临界";
                  row.westgardrules = "1 3s / 2 2s / R4s / 4 1s / 8X̅ ( N=4,R=2 或 N=2,R=4 )";
                  row.rules = "1_2S,1_3S,2_2S,R4S,4_1S,8X";
              } else if (row.σlevel >= 2 && row.σlevel < 3) {
                  row.performance = "欠佳";
              } else if (row.σlevel < 2 && row.σlevel != "") {
                  row.performance = "不可接受";
              }
              resolve();
          });
      },
      //切换仪器时
      yq_change(id, name) {
          this.instrid = id;
          this.instrname = name;
          this.BtnQueryQCLevel();
      },
      WestFlagChange() {
          this.bWestσFlag == "1" ? "0" : "1";
          this.Draw();
      },
      btnExport() {
          let tableColumn = this.$refs.itemXTable.getColumns();
          let extableColumn = [];
          tableColumn.forEach((item) => {
              if (item.property != "alladd" && item.property != "allin") extableColumn.push({ title: item.title, field: item.property });
          });
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcel(this.σData, extableColumn, "LIS535 验证项目表.xlsx", filtertxt);
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = "日期:" +XE.toDateString(this.startDt, "yyyy-MM-dd") + "至" + XE.toDateString(this.endDt, "yyyy-MM-dd") + "; ";
          if(this.instrid) filtertxt += "仪器:" + this.instrname + "; ";
          if(this.bOut3SD == "1") filtertxt += "显示3SD外; ";
          if(this.bInuse == "1") filtertxt += "仅累计点; ";
          return filtertxt;
      },
      Draw() {
          this.charts.clear();
          var markLineOpt = {
              animation: false,
              label: {
                  show: this.bWestσFlag == "1" ? true : false,
                  align: "right",
                  fontSize: 14,
                  fontWeight: 650,
              },
              tooltip: {
                  show: false,
              },
              lineStyle: {
                  type: "solid",
                  width: "2",
              },
              data: [
                  [
                      {
                          lineStyle: {
                              normal: {
                                  color: "DeepSkyBlue",
                              },
                          },
                          label: {
                              formatter: "1 3s(N=2，R=1)",
                              position: "end",
                              distance: [-170, -130],
                              tooltip: false,
                          },
                          tooltip: {
                              // formatter: "y = 100 - 6 * x",
                          },
                          coord: [0, 100],
                          symbol: "none",
                      },
                      {
                          coord: [100 / 6, 0],
                          symbol: "none",
                      },
                  ],
                  [
                      {
                          lineStyle: {
                              normal: {
                                  color: "Blue",
                              },
                          },
                          label: {
                              formatter: "1 3s/ 2 2s / R4( N=4，R=1)",
                              position: "insideEndBottom",
                              distance: [85, 5],
                          },
                          tooltip: {
                              // formatter: "y = 100 - 5 * x",
                          },
                          coord: [0, 100],
                          symbol: "none",
                      },
                      {
                          coord: [100 / 5, 0],
                          symbol: "none",
                      },
                  ],
                  [
                      {
                          lineStyle: {
                              normal: {
                                  color: "ForestGreen",
                              },
                          },
                          label: {
                              formatter: "13s / 22s / R4s / 41s( N=4,R=1 或 N=2,R=2 )",
                              position: "insideEndBottom",
                              distance: [50, 7],
                          },
                          tooltip: {
                              // formatter: "y = 100 - 4 * x",
                          },
                          coord: [0, 100],
                          symbol: "none",
                      },
                      {
                          coord: [100 / 4, 0],
                          symbol: "none",
                      },
                  ],
                  [
                      {
                          lineStyle: {
                              normal: {
                                  color: "DarkOrange",
                              },
                          },
                          label: {
                              formatter: "1 3s / 2 2s / R 4s / 4 1s / 8X̅ ( N=4,R=2 或 N=2,R=4 )",
                              position: "insideEndBottom",
                              distance: [70, 7],
                          },
                          tooltip: {
                              // formatter: "y = 100 - 3 * x",
                          },
                          coord: [0, 100],
                          symbol: "none",
                      },
                      {
                          coord: [100 / 3, 0],
                          symbol: "none",
                      },
                  ],
                  [
                      {
                          lineStyle: {
                              normal: {
                                  color: "Red",
                              },
                          },
                          tooltip: {
                              // formatter: "y = 100 - 2 * x",
                          },
                          coord: [0, 100],
                          symbol: "none",
                      },
                      {
                          coord: [100 / 2, 0],
                          symbol: "none",
                      },
                  ],
              ],
          };
          this.charts.setOption({
              title: {
                  text: "标准化西格玛性能验证图",
                  textStyle: {
                      fontSize: 23,
                  },
                  left: "center",
                  top: 5,
              },
              grid: [{ width: "85%", height: "80%" }],
              tooltip: {
                  // formatter: "Group {a}: ({c})",
                  formatter: function (params, ticket, callback) {
                      var name = params.data.name;
                      var pos = "&nbsp;" + params.data.pos;
                      var σlevel = "<br/>σ：" + params.data.σlevel;
                      var performance = "&nbsp;(" + params.data.performance + ")";
                      var westgardrules = "";
                      params.data.westgardrules == "" ? (westgardrules = "") : (westgardrules = "<br/>质控规则：" + params.data.westgardrules);
                      var label = name + pos + σlevel + performance + westgardrules;
                      // var na = params.data.name + params.data.pos;
                      return label;
                  },
              },
              xAxis: [
                  {
                      gridIndex: 0,
                      min: 0,
                      max: 50,
                      name: "不精密度(CV/TEa)",
                      nameTextStyle: {
                          fontSize: 18,
                          fontWeight: 700,
                          padding: [12, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                      },
                      axisLabel: {
                          show: true,
                          interval: 3,
                      },
                      splitNumber: 10,
                      axisTick: {
                          interval: 1,
                      },
                      nameLocation: "center",
                  },
              ],
              yAxis: [
                  {
                      gridIndex: 0,
                      min: 0,
                      max: 100,
                      name: "偏倚(Bias/TEa)",
                      nameTextStyle: {
                          fontSize: 18,
                          fontWeight: 700,
                          padding: [0, 0, 15, 0], // 四个数字分别为上右下左与原位置距离
                      },
                      splitNumber: 10,
                      axisTick: {
                          interval: 1,
                      },
                      nameLocation: "center",
                  },
              ],
              series: [
                  {
                      name: "I",
                      type: "scatter",
                      xAxisIndex: 0,
                      yAxisIndex: 0,
                      data: this.pointData,
                      markLine: markLineOpt,
                      itemStyle: {
                          normal: {
                              label: {
                                  show: this.bShowRptItemname == "1" ? true : false,
                                  position: "top",
                                  formatter: function (params, ticket, callback) {
                                      var labelname = params.name;
                                      return labelname;
                                  },
                                  //formatter: ["Label Text"].join("\n"),
                              },
                          },
                      },
                  },
              ],
          });
      },
      //查询-水平
      async BtnQueryQCLevel() {
          this.bQCLevelLoading = true;
          this.σData = [];
          this.pointData = [];
          this.Draw();
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS5/LIS535",
                  method: "post",
                  data: {
                      action: "query_IQC_QCLevel",
                      instrid: this.instrid,
                      startDt: this.startDt,
                      endDt: this.endDt,
                  },
              });
              if (res) {
                  if (res.length > 0) {
                      this.qcLvData = res;
                      this.$refs.qcLvXTable.setCurrentRow(this.qcLvData[0]);
                      this.BtnQueryσ(this.qcLvData[0]); //首次加载就要展示
                  } else {
                      this.qcLvData = [];
                      this.σData = [];
                      this.Draw();
                  }
              }
              this.bQCLevelLoading = false;
          } catch (e) {
              this.σData = [];
              this.σData = [];
              this.valueData = [];
              this.bQCLevelLoading = false;
              this.Draw();
              console.log("error", e);
          }
      },
      //查询-质控项目&仪器
      async BtnQueryσ(str) {
          this.bσLoading = true;
          this.σData = [];
          this.pointData = [];
          this.Draw();
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS5/LIS535",
                  method: "post",
                  data: {
                      action: "query_IQC_σ",
                      instrid: this.instrid,
                      startDt: this.startDt,
                      endDt: this.endDt,
                      bout3sd: this.bOut3SD,
                      binuse: this.bInuse,
                      qclevel: str.qclevel,
                  },
              });
              if (res) {
                  if (res.length > 0) {
                      this.σData = res;
                      this.$refs.itemXTable.setCurrentRow(this.σData[0]);
                      this.Draw();
                  } else {
                      this.σData = [];
                  }
                  this.Draw();
              }
              this.bσLoading = false;
          } catch (e) {
              this.bσLoading = false;
              this.σData = [];
              this.pointData = [];
          }
      },
      //水平 行选中事件
      QCLevelChange({ row }) {
          this.BtnQueryσ(row);
      },
      //项目 行选中事件
      ItemChange({ row }) {
          this.ImgChange(row);
          this.ChangShowItemMode();
      },
      ImgChange(row) {
          if (row.performance == "世界一流") {
              // this.src = require("@/assets/QC/IQC/LIS535/6σmode.jpg");
          } else if (row.performance == "优秀") {
              // this.src = require("@/assets/QC/IQC/LIS535/5σmode.jpg");
          } else if (row.performance == "良好") {
              // this.src = require("@/assets/QC/IQC/LIS535/4σmode.jpg");
          } else if (row.performance == "临界") {
              // this.src = require("@/assets/QC/IQC/LIS535/3σmode.jpg");
          } else {
              this.src = require("@/assets/QC/IQC/LIS535/basemode.jpg");
          }
          this.srcList = [this.src];
      },
      //关闭按钮
      BtnExc() {
          let index = this.$parent.$refs.itemtags.tagsList.findIndex((m) => m.name == "LIS535");
          this.$parent.$refs.itemtags.tagsList.splice(index, 1);
          this.$router.go(-1);
      },
      CellClassName({ row, column }) {
          if (column.property == "performance") {
              if (row.performance == "世界一流") {
                  return "performance6";
              } else if (row.performance == "优秀") {
                  return "performance5";
              } else if (row.performance == "良好") {
                  return "performance4";
              } else if (row.performance == "临界") {
                  return "performance3";
              } else if (row.performance == "欠佳") {
                  return "performance2";
              } else if (row.performance == "不可接受") {
                  return "performance1";
              }
          } else if (column.property == "qctea" || column.property == "cv" || column.property == "bias") {
              return "can-mod";
          } else {
              return "";
          }
      },
  },
  beforeRouteEnter(to, from, next) {
      next((vm) => {
          let that = vm;
          let altArr = [];
          document.onkeydown = function (e) {
              let key = window.event.keyCode;
              //*组合按键
              if (altArr.length > 0) {
                  if (key == 69) {
                      //E 退出
                      that.BtnExc();
                  }
              } else {
                  if (key == 119) {
                      //F8
                      that.BtnQueryQCLevel();
                  } else if (key == 121) {
                      //F10
                  } else if (key == 122) {
                      //F11
                  } else if (key == 18) {
                      console.log("按下'ALT'");
                      //按下了alt
                      altArr.push(key);
                  }
              }
          };
          document.onkeyup = function (e) {
              let key = window.event.keyCode;
              if (key == 18) {
                  altArr = [];
              }
          };
      });
  },
};
</script>

<style scoped>
table {
  font-size: 12px;
  width: 100%;
  border-spacing: 5px;
}
.pagetop {
  width: 100%;
  height: 65px;
  border: 1px solid #ccc;
  position: absolute;
  font-size: 12px;
  padding: 3px;
  line-height: 26x;
  /* 滚动条改这里 */
  overflow-x: auto;
  overflow-x: overlay;
}
.pagecenter {
  position: absolute;
  top: 67px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 3px;
  overflow: auto;
}

.datacenter {
  position: absolute;
  top: 200px;
  width: 100%;
  left: 0;
  bottom: 5px;
}
.tab-title {
  margin: 0;
  font-size: 13px;
  /* margin: 0 1px 0 3px; */
  padding: 0 1px 0 3px;
  font-weight: 600;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
::v-deep tr.vxe-body--row.row--current {
  color: #000000;
  font-weight: bold;
}
::v-deep .vxe-table .vxe-cell {
  white-space: normal;
  word-break: break-word;
  padding: 0 5px;
}
::v-deep .el-checkbox__label {
  display: inline-block;
  padding-left: 3px;
  line-height: 19px;
  font-size: 12px;
}
::v-deep .vxe-table--header .vxe-header--column {
  border-right: 1px solid #1a8a8c;
  border-bottom: 1px solid rgb(204, 204, 204);
}
.s-param {
  height: 52px !important;
  display: flex;
}
.s-title {
  margin: 0 1px 0 3px;
  font-size: 12px;
  text-align: right;
  font-weight: 600;
}
.s-param__text {
  margin: 0 10px 0 5px;
}
.s-btn {
  float: right;
  align: right;
  margin: 5px 5px 0 0;
  text-align: right;
  top: 29px;
  right: 0px;
  position: absolute;
}
.s-param .el-input--small .el-input__inner {
  /* height: 62px !important; */
  line-height: 26px !important;
}
.tabtop {
  width: 100%;
  height: 26px;
  line-height: 26px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  white-space: nowrap;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 5px;
}
::v-deep .performance6 {
  background-color: DeepSkyBlue !important;
  font-weight: 600;
}
::v-deep .performance5 {
  background-color: CornflowerBlue !important;
  font-weight: 600;
}
::v-deep .performance4 {
  background-color: ForestGreen !important;
  font-weight: 600;
}
::v-deep .performance3 {
  background-color: DarkOrange !important;
  font-weight: 600;
}
::v-deep .performance2 {
  background-color: Red !important;
  font-weight: 600;
}
::v-deep .performance1 {
  background-color: LightSlateGray !important;
  font-weight: 600;
}
::v-deep tr.vxe-body--row.row-modify {
  color: rgb(202, 119, 24) !important;
}
::v-deep .can-mod {
  background-color: rgb(255, 255, 255) !important;
}
</style>
